<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}"></link>
    <style type="text/css">
        table {
            border: 1px solid black;
            text-align: center;
            border-collapse: collapse;
        }

        table thead th {
            border: 1px solid black;
        }

        table tbody td {
            border: 1px solid black;
        }
    </style>
</head>
<body class="container">
<h1>行政管理区域 信息如下</h1>
<div class="with:80%">
    <table class="table table-hover">
        <thead>
            <th>ID</th>
            <th>区域名</th>
            <th>区域编码</th>
            <th>上级编码</th>
            <th>层级</th>
            <th>URL</th>
        </thead>
        <tbody>
            <tr th:each="page:${pages}">
                <td th:text="${page.id}"></td>
                <td th:text="${page.localName}"></td>
                <td th:text="${page.localCode}"></td>
                <td th:text="${page.supLocalCode}"></td>
                <td th:text="${page.lv}"></td>
                <td th:text="${page.url}"></td>
            </tr>
        </tbody>
    </table>
</div>
<div class="form-group">
    <div class="col-sm-2 control-label">
        <a href="/toAdd" th:href="@{/toAdd}" class="btn btn-info">add</a>
    </div>
</div>
<div class="modal-footer no-margin-top">
    <ul class="pagination pull-right no-margin">

        <!-- 首页 -->
        <li>
            <a th:href="'/list?pageNum=0'">首页</a>
        </li>

        <!-- 上一页 -->
        <li th:if="${pages.hasPrevious()}">
            <a th:href="'/list?pageNum=' + ${pages.previousPageable().getPageNumber()}" th:text="上一页"></a>
        </li>

        <!-- 中间页 -->
        <li th:each="pageNum:${#numbers.sequence(0, pages.getTotalPages() - 1)}">
            <a th:href="'/list?pageNum=' + ${pageNum}" th:text="${pageNum + 1}"
               th:if="${pageNum ne pages.pageable.getPageNumber()}"></a>
            <a th:href="'/list?pageNum=' + ${pageNum}" th:text="${pageNum + 1}"
               th:if="${pageNum eq pages.pageable.getPageNumber()}"
               th:style="'font-weight:bold;background: #6faed9;'"></a>
        </li>

        <!-- 下一页 -->
        <li th:if="${pages.hasNext()}">
            <a th:href="'/list?pageNum=' + ${pages.nextPageable().getPageNumber()}" th:text="下一页"></a>
        </li>

        <!-- 尾页 -->
        <li>
            <a th:href="'/list?pageNum=' + ${pages.getTotalPages() - 1}">尾页</a>
        </li>

    </ul>
</div>
</body>
</html>